<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <canvas id="canvas" style="border: 1px solid #aaa;display: block;margin: 50px auto;"></canvas>
</div>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext('2d');
        canvas.width = 800;
        canvas.height = 800;
        drawHeart(ctx,400,400,50,30);
    }
    function drawHeart(ctx,x,y,R,rot) {
        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(rot/180*Math.PI);
        ctx.scale(R, R);
        heartPath(ctx);
        /*ctx.strokeStyle = "red"; ctx.lineWidth = "3px";*/
        ctx.fillStyle = "red";
        ctx.shadowColor = "gray";
        ctx.shadowOffsetX = 5;
        ctx.shadowOffsetY = 5;
        ctx.shadowBlur = 5; ctx.fill();
        //ctx.stroke(); ctx.restore();
    }
    function heartPath(ctx) {
        ctx.beginPath();
        ctx.arc(-1,0,1,Math.PI,0,false);
        ctx.arc(1,0,1,Math.PI,0,false); //貝塞尔曲线画心
        ctx.bezierCurveTo(1.9, 1.2, 0.6, 1.6, 0, 3.0);
        ctx.bezierCurveTo( -0.6, 1.6,-1.9, 1.2,-2,0);
        ctx.closePath();
    }
</script>
</body>

</html>